<template>
  <div>
    <div ref="tabHeight" class="ml20">
      <!--      <head-tab-switch navTitle="1"/>-->
    </div>
    <div ref="condationHeight" class="ml20 fl">
      <condition-inquery :systemsLiteList="systemsLiteList" @searchFn="searchFn" @recalculateTableHeight="recalculateTableHeight"/>
    </div>
    <div class="btnBox fr">
      <el-button @click="addRouteDeviceFn" type="primary" plain><i class="iconfont mr5">&#xe66e;</i>新增路由设备</el-button>
    </div>
    <el-table :data="tableData" border
              :header-cell-style="{background: '#F5F5F5',color: '#333'}"
              :height="tableHeight"
              highlight-current-row
              header-row-class-name="strong">
      <el-table-column
        label="序号"
        fixed="left"
        width="100">
        <template slot-scope="scope">
          {{ orderNum + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        fixed="left"
        width="110">
        <template slot-scope="scope">
          <el-button title="查看" @click="viewDetail(scope.row)" type="primary" size="small" class="w24 h24 lh24 nop"><i class="iconfont f18i thin">&#xe678;</i></el-button>
          <el-button title="修改" @click="modifyFn(scope.row)" type="primary" size="small" class="w24 h24 lh24 nop"><i class="iconfont f18i thin">&#xe679;</i></el-button>
          <el-button title="删除" @click="deleteFn(scope.row)" type="danger" size="small" class="w24 h24 lh24 nop"><i class="iconfont f18i thin">&#xe682;</i></el-button>
        </template>
      </el-table-column>
      <common-table :propData="propData" ></common-table>
    </el-table>
    <!-- 分页 -->
    <div ref="paginationHeight">
      <pagination-tool :total="total" :page.sync="listQuery.page_index" :limit.sync="listQuery.page_size" @pagination="fecthTableData"/>
    </div>

    <add-route-device
      :AddRouteDeviceShow="AddRouteDeviceShow"
      :rowId="rowId"
      :dialogType="dialogType"
      :frontnodesInfo="frontnodesInfo"
      :systemsLiteList="systemsLiteList"
      @AddRouteDeviceClose="AddRouteDeviceClose"
      @refreshTable="getRouteStrategyList"
      @resetRowId="resetRowId"/>
  </div>

</template>
<script>
import HeadTabSwitch from '@/components/common/HeadTabSwitch' // 头部tab
import ConditionInquery from './components/ConditionInquery' // 查询条件
import CommonTable from '@/components/common/CommonTable' // 表格
import PaginationTool from '@/components/common/PaginationTool' // 分页
// import DetailDrawer from './components/DetailDrawer'
// import { ComprehensiveQuery } from '@/api/pacs_template' // 接口
import { recalculateTableHeight } from '@/utils/mixin/simpleFilter' // 计算table 高度
import AddRouteDevice from '@/components/pacs/commonDialog/AddRouteDevice' // 新增前置机

export default {
  data () {
    return {
      tableHeight: 0,
      propData: [
        {
          prop: 'system_name',
          label: '系统名称'
        },
        {
          prop: 'institution_name',
          label: '机构名称'
        },
        {
          prop: 'front_node_name',
          label: '前置机'
        },
        {
          prop: 'node_name',
          label: '节点描述'
        },
        {
          prop: 'node_host',
          label: '节点地址'
        },
        {
          prop: 'node_aet',
          label: '应用标识'
        },
        {
          prop: 'node_port',
          label: '服务端口'
        }
      ],
      tableData: [],
      AddRouteDeviceShow: false,
      listQuery: {
        page_index: 1,
        page_size: 20
      },
      formData: {},
      total: 10000,
      rowId: 0,
      dialogType: '', // 弹窗的类型: 新增add 查看view 修改modify
      frontnodesInfo: [],
      institutionList: [],
      systemsLiteList: [], // 系统名称
    }
  },
  mixins: [recalculateTableHeight],
  mounted () {
    this.getFrontnodesInfo()
    this.getRouteStrategyList()
    // this.getInstitutionsList() // 获取机构列表
    this.getSystemsLiteList() // 获取系统名称
  },
  computed: {
    orderNum() {
      if(this.listQuery.page_index === 1) {
        return 0
      }else {
        return (this.listQuery.page_index - 1) * this.listQuery.page_size
      }
    }
  },
  methods: {
    AddRouteDeviceClose () {
      this.AddRouteDeviceShow = false
    },
    deleteFn (rowData) {
      this.$confirm('确定要删除路由策略?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRouteStrategy(rowData.id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async deleteRouteStrategy (id) { // 删除
      const res = await this.$pacsApi.pacsApi.deleteRouteStrategy(id)
      const { code, msg } = res
      if (code === 0) {
        this.getRouteStrategyList()
        this.$message({
          type: 'success',
          message: msg
        })
      }
    },
    async getRouteStrategyList () { // 获取列表
      const data = Object.assign(this.formData, this.listQuery)
      this.$pacsApi.pacsApi.getRouteStrategyList(data).then(res => {
        console.log(res)
        const { code, data, page } = res
        if (code === 0) {
          this.tableData = data
          this.total = page.total_count
        }
      })
    },
    async fecthTableData () { // 翻页改变
      this.tableData = []
      this.getRouteStrategyList()
    },
    searchFn (params) { // 搜素
      this.listQuery.page_index = 1 // 重置页数
      this.formData = params
      this.getRouteStrategyList()
    },
    viewDetail (rowData) { // 查看
      this.rowId = rowData.id
      this.dialogType = 'view'
      this.AddRouteDeviceShow = true
    },
    modifyFn (rowData) { // 修改
      this.rowId = rowData.id
      this.dialogType = 'modify'
      this.AddRouteDeviceShow = true
    },
    addRouteDeviceFn () { // 新增
      this.rowId = 0
      this.dialogType = 'add'
      this.AddRouteDeviceShow = true
    },
    resetRowId () {
      this.rowId = 0
    },
    async getFrontnodesInfo() { // 前置机下拉框
      let res = await this.$pacsApi.pacsApi.getFrontnodesInfo()
      let { code, data } = res
      if(code === 0) {
        this.frontnodesInfo = data
      }
    },
    async getInstitutionsList() {
      let res = await this.$pacsApi.pacsApi.getInstitutionsList()
      let { code, data } = res
      if(code === 0) {
        this.institutionList = data
      }
    },
    async getSystemsLiteList() {
      let res = await this.$pacsApi.pacsApi.getSystemsLiteList({ type: 1 })
      let { code, data } = res
      if(code === 0) {
        this.systemsLiteList = data
      }
    }
  },
  components: {
    HeadTabSwitch,
    ConditionInquery,
    CommonTable,
    PaginationTool,
    AddRouteDevice
  }
}
</script>
<style lang="less" scoped>
  .btnBox {
    margin: 0 20px 0 0;
    padding: 10px 0 20px 0;
    button {
      width: 130px;
      height: 40px;
      background-color: #fff;
      border: 1px solid #DCDFE6;
      padding: 0;
    }
  }
  /deep/.el-form-item__label {
    padding-right: 0;
  }
  .f18i {
    font-size: 18px!important;
  }
  .el-button+.el-button {
    margin-left: 5px;
  }
  /deep/.el-table--border .el-table__fixed-body-wrapper{
    top: 40px !important;
  }
  /deep/ .el-table .el-table__fixed {
    height: 100% !important;
  }
</style>
